<template>
  <div class="TodoList">
    <div class="top">
      <el-input v-model="inp" style="width: 240px" />
      <el-button @click="add">新建</el-button>
    </div>
    <div class="arr">
      <indexView
        v-for="(item, index) in arr"
        :key="index"
        :item="item"
        :index="index"
        @handleDel="del"
        @handleEdit="edit"
        @handleSave="save"
      ></indexView>
    </div>
  </div>
</template>

<script lang="ts" setup>
import indexView from '@/views/ceshi/computed/indexView.vue'
import { ElMessage } from 'element-plus'
import { ref, reactive } from 'vue'
let inp = ref('')
interface IItem {
  flag: boolean
  content: string
}
//获取数据
const aa = localStorage.getItem('arr')
const a = aa ? JSON.parse(aa) : []
console.log(a)

let arr = ref<IItem[]>(a)
// let arr: IItem[] = reactive([])

// 添加
function add() {
  if (!inp.value) return ElMessage.warning('内容不能为空')
  let obj = {
    flag: true,
    content: inp.value
  }
  arr.value.push(obj)
  localStorage.setItem('arr', JSON.stringify(arr.value))
  inp.value = ''
}
// 删除
function del(index: number) {
  arr.value.splice(index, 1)
  localStorage.setItem('arr', JSON.stringify(arr.value))
}
// 修改
function edit(index: number) {
  arr.value.forEach((item) => (item.flag = true))
  arr.value[index].flag = false
}
// 保存
function save(index: number, value: string) {
  arr.value[index].content = value
  arr.value[index].flag = true
  localStorage.setItem('arr', JSON.stringify(arr.value))
}
</script>

<style lang="scss" scoped>
.TodoList {
  width: 100%;
  height: 100%;
}
.top {
  width: 100%;
  border: 1px solid #000;
  padding: 20px;
}

ul {
  width: 100%;
  overflow: hidden;
}
li {
  margin-top: 10px;
  padding: 20px;
}
.pp {
  margin-top: 10px;
}
.arr {
  width: 100%;
  overflow: hidden;
}
</style>
